import  { useState } from 'react'
import { NavBar, Tabs, Button} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

function Index() {
  const nav = useNavigate()
  const [activeTab, setActiveTab] = useState('served')

  const tabs = [
    {
      key: 'served',
      title: '服务过我的医生',
      content: (
        <div style={{ 
          padding: '20px', 
          textAlign: 'center',
          minHeight: '400px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          {/* 空状态插画 */}
          <div style={{
            position: 'relative',
            marginBottom: '20px'
          }}>
            {/* 文档插画 */}
            <div style={{
              width: '120px',
              height: '80px',
              background: '#f0f0f0',
              borderRadius: '8px',
              border: '2px solid #e0e0e0',
              position: 'relative',
              margin: '0 auto'
            }}>
              {/* 文档线条 */}
              <div style={{
                position: 'absolute',
                top: '15px',
                left: '15px',
                right: '15px',
                height: '2px',
                background: '#d0d0d0',
                borderRadius: '1px'
              }} />
              <div style={{
                position: 'absolute',
                top: '25px',
                left: '15px',
                right: '15px',
                height: '2px',
                background: '#d0d0d0',
                borderRadius: '1px'
              }} />
              <div style={{
                position: 'absolute',
                top: '35px',
                left: '15px',
                right: '15px',
                height: '2px',
                background: '#d0d0d0',
                borderRadius: '1px'
              }} />
              <div style={{
                position: 'absolute',
                top: '45px',
                left: '15px',
                right: '15px',
                height: '2px',
                background: '#d0d0d0',
                borderRadius: '1px'
              }} />
            </div>
            
            {/* 人物插画 */}
            <div style={{
              position: 'absolute',
              right: '-20px',
              top: '20px',
              width: '40px',
              height: '50px',
              background: '#e3f2fd',
              borderRadius: '20px 20px 8px 8px',
              border: '2px solid #bbdefb'
            }}>
              {/* 头部 */}
              <div style={{
                width: '20px',
                height: '20px',
                background: '#ffcdd2',
                borderRadius: '50%',
                position: 'absolute',
                top: '-10px',
                left: '8px',
                border: '2px solid #f8bbd9'
              }} />
              {/* 身体 */}
              <div style={{
                width: '30px',
                height: '25px',
                background: '#2196f3',
                borderRadius: '15px 15px 5px 5px',
                position: 'absolute',
                top: '8px',
                left: '3px'
              }} />
              {/* 腿 */}
              <div style={{
                width: '8px',
                height: '15px',
                background: '#1976d2',
                borderRadius: '4px',
                position: 'absolute',
                top: '30px',
                left: '8px'
              }} />
              <div style={{
                width: '8px',
                height: '15px',
                background: '#1976d2',
                borderRadius: '4px',
                position: 'absolute',
                top: '30px',
                right: '8px'
              }} />
            </div>
          </div>

          {/* 空状态文字 */}
          <div style={{
            fontSize: '16px',
            color: '#666',
            marginBottom: '30px'
          }}>
            暂无"服务过我的医生"
          </div>

          {/* 统计信息 */}
          <div style={{
            fontSize: '18px',
            color: '#ff6b00',
            fontWeight: 'bold',
            marginBottom: '10px'
          }}>
            30W+注册医生, 2W+名医专家
          </div>

          {/* 说明文字 */}
          <div style={{
            fontSize: '14px',
            color: '#666',
            lineHeight: '1.5',
            marginBottom: '40px',
            padding: '0 20px'
          }}>
            报到即可绑定医生,医生可提供门诊预约、在线咨询、开方续方、健康随访和科普健康知识服务
          </div>

          {/* 底部按钮 */}
          <Button 
            block 
            color='primary' 
            size='large'
            style={{
              borderRadius: '8px',
              height: '48px',
              fontSize: '16px',
              fontWeight: 'bold'
            }}
            onClick={() => nav('/more')}
          >
            去报到医生
          </Button>
        </div>
      )
    },
    {
      key: 'followed',
      title: '我关注的医生',
      content: (
        <div style={{ 
          padding: '20px', 
          textAlign: 'center',
          minHeight: '400px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          {/* 空状态插画 */}
          <div style={{
            position: 'relative',
            marginBottom: '20px'
          }}>
            {/* 文档插画 */}
            <div style={{
              width: '120px',
              height: '80px',
              background: '#f0f0f0',
              borderRadius: '8px',
              border: '2px solid #e0e0e0',
              position: 'relative',
              margin: '0 auto'
            }}>
              {/* 文档线条 */}
              <div style={{
                position: 'absolute',
                top: '15px',
                left: '15px',
                right: '15px',
                height: '2px',
                background: '#d0d0d0',
                borderRadius: '1px'
              }} />
              <div style={{
                position: 'absolute',
                top: '25px',
                left: '15px',
                right: '15px',
                height: '2px',
                background: '#d0d0d0',
                borderRadius: '1px'
              }} />
              <div style={{
                position: 'absolute',
                top: '35px',
                left: '15px',
                right: '15px',
                height: '2px',
                background: '#d0d0d0',
                borderRadius: '1px'
              }} />
              <div style={{
                position: 'absolute',
                top: '45px',
                left: '15px',
                right: '15px',
                height: '2px',
                background: '#d0d0d0',
                borderRadius: '1px'
              }} />
            </div>
            
            {/* 人物插画 */}
            <div style={{
              position: 'absolute',
              right: '-20px',
              top: '20px',
              width: '40px',
              height: '50px',
              background: '#e3f2fd',
              borderRadius: '20px 20px 8px 8px',
              border: '2px solid #bbdefb'
            }}>
              {/* 头部 */}
              <div style={{
                width: '20px',
                height: '20px',
                background: '#ffcdd2',
                borderRadius: '50%',
                position: 'absolute',
                top: '-10px',
                left: '8px',
                border: '2px solid #f8bbd9'
              }} />
              {/* 身体 */}
              <div style={{
                width: '30px',
                height: '25px',
                background: '#2196f3',
                borderRadius: '15px 15px 5px 5px',
                position: 'absolute',
                top: '8px',
                left: '3px'
              }} />
              {/* 腿 */}
              <div style={{
                width: '8px',
                height: '15px',
                background: '#1976d2',
                borderRadius: '4px',
                position: 'absolute',
                top: '30px',
                left: '8px'
              }} />
              <div style={{
                width: '8px',
                height: '15px',
                background: '#1976d2',
                borderRadius: '4px',
                position: 'absolute',
                top: '30px',
                right: '8px'
              }} />
            </div>
          </div>

          {/* 空状态文字 */}
          <div style={{
            fontSize: '16px',
            color: '#666',
            marginBottom: '40px'
          }}>
            暂无"我关注的医生"
          </div>

          {/* 底部按钮 */}
          <Button 
            block 
            color='primary' 
            size='large'
            style={{
              borderRadius: '8px',
              height: '48px',
              fontSize: '16px',
              fontWeight: 'bold'
            }}
            onClick={() => nav('/more')}
          >
            去关注医生
          </Button>
        </div>
      )
    }
  ]

  return (
    <div style={{ 
      width: '100vw', 
      minHeight: '100vh', 
      background: '#fff' 
    }}>
      {/* 导航栏 */}
      <NavBar 
        onBack={() => nav(-1)} 
        backArrow
        style={{ borderBottom: '1px solid #f0f0f0' }}
      >
        我的医生
      </NavBar>

      {/* Tab切换 */}
      <div style={{ 
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <Tabs 
          activeKey={activeTab} 
          onChange={setActiveTab}
          style={{
            '--active-line-color': '#1677ff',
            '--active-title-color': '#1677ff'
          }}
        >
          {tabs.map(tab => (
            <Tabs.Tab title={tab.title} key={tab.key}>
              {tab.content}
            </Tabs.Tab>
          ))}
        </Tabs>
      </div>
    </div>
  )
}

export default Index
